<template>
    <div ref="chartRef" style="width: 1200px; height: 400px"/>
  </template>
  
  <script setup>
  import {onMounted, watch} from "vue";
  import {useEcharts} from "@/hook/ useEcharts";
  import * as echarts from "echarts";
  
  const {chartRef, initChart, updateChart} = useEcharts();
  const props = defineProps({
    value: {
      type: Object,
      default: () => ({yData: [], data: []}),
    },
  });
  


const option = {
  title: {
    
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
     legend: {
      data: ['参考数据数'],
      top: '4%',
      textStyle: {
        color: "#0FFFFE"
      },
      itemWidth: 15,
      itemHeight: 10,
      containLabel: true
    },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    min: 0,       
    max: 700,    
  },
  yAxis: {
    type: 'category',
    name: "单位：个",
    data: ['类别一', '类别二', '类别三', '类别四', '类别五',]
  },
  series: [
    {
      name: '参考数据数',
      type: 'bar',
      data: [182, 234, 290, 590, 333, 630],
      itemStyle: {
      color: '#0FFFFE' 
    }
    },
   
  ]
};
  
  watch(() => {
    return props.value
  }, (newVal) => {
    updateChart({
      yAxis: [{
        data: newVal.yData,
      }],
      series: [{
        name: '系统数',
        data: newVal.data,
      }]
    })
  }, {deep: true})
  
  onMounted(() => {
    // 初始化图表
    initChart(option);
  });
  
  </script>
  
  <style scoped lang="scss">
  
  </style>
  